<template>
  <div class="margin120">
    <div>
      <div class="big-block-padding">
        <h5 class="i_title">{{ $t('zz.home.card.title')}}</h5>
        <div class="mx-container">
          <div class="list-wrap">
            <div class="list-item">
              <img src="@/assets/img/home/list1.png" />
              <div class="item-content">
                <div class="title">{{$t('zz.home.cdn.title')}}</div>
                <div class="content"><span class="red">{{ $t('zz.home.tag.cdn.intro1') }}</span> {{$t('zz.home.tag.cdn.intro2')}}<span class="red">{{$t('zz.home.tag.cdn.intro3')}}</span> </div>
                <el-button type="primary" @click="handleJump('/cloudSecurity?type=1')">{{ $t('zz.home.tag.btn1') }}</el-button>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/img/home/list2.png" />
              <div class="item-content">
                <div class="title">{{$t('zz.home.fuwuqi.title')}}</div>
                <div class="content"><span class="red">2{{$t('zz.basics.cloud.meal.name')}}4G</span> {{ $t('zz.home.fuwuqi.cdn.intro1') }}，<span class="red">{{ $t('zz.home.fuwuqi.cdn.intro2') }}</span></div>
                <el-button type="primary" @click="handleJump('/cloudSecurity?type=1')">{{ $t('zz.home.tag.btn1') }}</el-button>
              </div>
            </div>
            <div class="list-item white-card">
              <img src="@/assets/img/home/list3.png" />
              <!-- <div class="item-content">
                <div class="title">{{$t('zz.home.yzwlxl.title')}}</div>
                <div class="content">{{$t('zz.home.yzwlxl.intro')}}</div>
                <button class="zz-btn btn-empty mini" @click="handleJump('/basics?type=4')">{{$t('zz.home.know_details')}}</button>
              </div> -->
              <div class="item-content">
                <div class="title">{{$t('zz.home.safe.title')}}</div>
                <div class="content">{{$t('zz.home.yunanquan.cdn.intro1')}}，<span class="red">{{$t('zz.home.yunanquan.cdn.intro2')}}</span></div>
                <el-button type="primary" @click="handleJump('/cloudSecurity?type=1')">{{ $t('zz.home.tag.btn1') }}</el-button>
              </div>
            </div>
            <div class="list-item white-card">
              <img src="@/assets/img/home/list4.png" />
              <!-- <div class="item-content">
                <div class="title">{{$t('zz.home.yzwlxl.title')}}</div>
                <div class="content">{{$t('zz.home.yzwlxl.intro')}}</div>
                <button class="zz-btn btn-empty mini" @click="handleJump('/basics?type=4')">{{$t('zz.home.know_details')}}</button>
              </div> -->
              <div class="item-content">
                <div class="title">{{$t('zz.home.all.title')}}</div>
                <div class="content">{{$t('zz.home.quanchanpin.cdn.intro')}}</div>
                <el-button type="primary" @click="handleJump('/cloudSecurity?type=1')">{{ $t('zz.home.tag.btn2') }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bgF2 big-block-padding">
        <div class="mx-container bgF2">
          <h5 class="i_title">{{$t('zz.solution')}}</h5>
          <ul class="pr-list list-wrap">
            <li class="pr-item list-item">
              <img src="@/assets/img/home/pr1.png" />
              <div class="item-content">
                <div class="title">{{$t('zz.yishiping')}}</div>
              </div>
            </li>
            <li class="pr-item list-item">
              <img src="@/assets/img/home/pr2.png" />
              <div class="item-content">
                <div class="title">{{$t('zz.youxi')}}</div>
              </div>
            </li>
            <li class="pr-item list-item">
              <img src="@/assets/img/home/pr3.png" />
              <div class="item-content">
                <div class="title">{{$t('zz.shuziren')}}</div>
              </div>
            </li>
            <li class="pr-item list-item">
              <img src="@/assets/img/home/pr4.png" />
              <div class="item-content">
                <div class="title">{{$t('zz.liansuo')}}</div>
              </div>
            </li>

          </ul>
          <div class="">
            <div  class="tall-wrap">
              <div>
                <img src="@/assets/img/home/tall1.png" alt="">
                <h5>{{$t('zz.home.fir.tell.before')}}</h5> 
                <p>{{$t('zz.home.fir.tell.before.intro')}}</p>
                <el-button type="primary" plain round> {{$t('zz.home.fir.tell.before')}}</el-button>
              </div>
              <div>
                <img src="@/assets/img/home/tall2.png" alt="">
                <h5>{{$t('zz.home.fir.tell.after')}}</h5> 
                <p>{{$t('zz.home.fir.tell.after.intro')}}</p>
                <el-button type="primary" plain round> {{$t('zz.home.fir.tell.after')}}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mx-container big-block-padding">
        <h5 class="i_title">{{ $t('zz.home.fir.titlr') }}</h5>
        <ul  class="fi-wrap">
          <li>
            <img src="@/assets/img/home/fi1.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi2.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi3.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi4.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi5.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi6.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi7.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/home/fi8.png" alt="">
          </li>
        </ul>
      </div>
    </div>
    <!-- <div style="margin-top:60px;">
      <img
        :src="$t('zz.img.home.bg')"
        alt=""
        class="home-img"
        object-fit="cover"
      />
    </div> -->
  </div>
</template>

<script>
// 1. 引入插件
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      listener: true,
     
    };
  },

  components: {
  },
  props: {},
  mounted() {
    const self = this;
    console.log(this.$a,'aaa');
    // 预加载
    // setTimeout(()=>{

    // })
    // self.scollFun(this.index)

    // window.screenTop = 0
    // // 点击页面跳转
    // Bus.$on('indexChange', (e) => {
    //   self.scollFun(e)
    // })
    // window.addEventListener('scroll', self.handleScroll,true)
  },
  beforeDestroy() {
    const self = this;
    // window.removeEventListener('scroll', self.handleScroll,true)
  },
  computed: {
    ...mapGetters({ index: "index", isPC: 'isPC' }),
  },
  watch: {
    // index:function(n,o){
    //   this.scrollWindowForWindow(n, 100)
    // }
  },
  methods: {
    handleJump(path){
      this.$router.push(path)
    }
    
    // scollFun(a_i){
    //   let self = this;
    //   self.listener = false;
    //   setTimeout( ()=>{
    //     self.scrollWindowForWindow(a_i, 1000)
    //     setTimeout(()=>{
    //       self.listener = true;
    //     },200)
    //   },200)
    // },
    // scrollWindowForWindow(a_n, speed) {
    //   const ref = this.$refs[`modal${a_n}`];
    //   const _this = this
    //   const windowH = window.innerHeight // 浏览器窗口高度
    //   const h = ref.$el.offsetHeight // 模块内容高度
    //   const t = ref.$el.offsetTop // 模块相对于内容顶部的距离
    //   console.log(windowH,h,t)
    //   // const top = t - (windowH - h) / 2 // 需要滚动到的位置，若改为 t 则滚动到
    //   const top = t //- (windowH - h) / 2 // 需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
    //   const scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop // 滚动条距离顶部高度
    //   let currentTop = scrollTop // 默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
    //   let requestId = null;
    //   // 采用requestAnimationFrame，平滑动画
    //   let pos = top-currentTop
    //   console.log(pos)
    //   window.scrollTo(0, top - 80)
    //   // function step() {
    //   //   // 判断让滚动条向上滚还是向下滚
    //   //   if (scrollTop < top) {
    //   //     if (currentTop <= top) {
    //   //       //   window.scrollTo(x,y) y为上下滚动位置
    //   //       window.scrollTo(0, currentTop)
    //   //       // step = currentTop
    //   //       requestId = window.requestAnimationFrame(step)
    //   //     } else {
    //   //       window.cancelAnimationFrame(requestId)
    //   //     }
    //   //     // 向下滚动
    //   //     currentTop += speed
    //   //   } else {
    //   //     if (top <= currentTop) {
    //   //       // 注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
    //   //       window.scrollTo(0, currentTop - speed)
    //   //       requestId = window.requestAnimationFrame(step)
    //   //     } else {
    //   //       window.cancelAnimationFrame(requestId)
    //   //     }
    //   //     // 向上滚动
    //   //     currentTop -= speed
    //   //   }
    //   // }
    //   // window.requestAnimationFrame(step)
    // },
    // handleScroll() {
    //   if(!this.listener) return false;
    //   const scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop // 滚动条距离顶部高度
    //   let index = null;
    //   // const t = this.$refs[`modal${1}`].$el.getBoundingClientRect().y // 模块相对于内容顶部的距离
    //   for(let i = 0;i<=5;i++){
    //     const t = this.$refs[`modal${i}`].$el.getBoundingClientRect().y // 模块相对于内容顶部的距离
    //     if(t-80<0){
    //       console.log(t,i)
    //       index = i;
    //     }
    //   }
    //   if(index != null){
    //     this.$store.dispatch('other/setIndex',index)
    //   }
    // },
  },
};
</script>
<style lang='scss' scoped>
.bg-white{
  // background-color: #fff;
}
h5.i_title{
  font-size: 30px;
  margin: 50px 0;
  text-align: center;
}
.list-wrap {
  display: flex;
  flex-wrap: wrap;
  
  .list-item {
    width:48%;
    position: relative;
    &:nth-child(odd){
      margin-right:2%;
    }
    &:nth-child(even){
      margin-left:2%;
    }
    &:nth-child(n+3){
      margin-top: 35px;
    }
    img {
      width: 100%;
    }
    .item-content {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      padding: 40px 35px;
      color: #000;
      .title {
        font-size: 25px;
        line-height: 1.5;
       
        color: #006AFF;
        margin-bottom: 20px;
      }
      .content {
        font-size: 15px;
        line-height: 150%;
        height: 40px;
        margin: 18px 0 20px;
        // height: 45px;
        width: 65%;
        .red{
          color: #FF578B;
        }
      }
      .zz-btn {
      }
    }
    &.white-card {
      .item-content {
        color: #000;
      }
    }
  }
  &.pr-list{
      flex: 1;
      flex-wrap: nowrap;
      .pr-item{
        border-radius: 20px;
        margin: 0 20px 0 0;
        overflow: hidden;
        img{
          height: 100%;
        }
        .title{
            color: #fff;
            text-align: center;
          }
        &:last-child{
          margin-right: 0;
          
        }
      }
    }
  
}
.tall-wrap{
    display: flex;
    width: 100%;
    margin-top: 90px;
    &>div{
      width: 50%;
      position: relative;
      padding: 20px 20px 20px 200px;
      img{
        position: absolute;
        left: 80px;
        top: 20px;
        width:auto;
      }
      h5{
        font-size: 25px;
        margin-bottom: 25px;
      }
      p{
        font-size: 16px;
        line-height: 1.5;
        width: 70%;
        margin-bottom: 25px;
      }
      &:first-child{
        &::after{
          content: '';
          position: absolute;
          right: 0;
          top: 15%;
          bottom: 15%;
          width: 5px;
          border-radius: 3px;
          background-color: #D9D9D9;
        }
      }
    }
  }
  .fi-wrap{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 22%;
      margin-right: 4%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
      img{
        width: 50%;
      }
      &:nth-child(4n){
        margin-right: 0;
      }
    }
  }
.home-img{
  width: 100%; 
  min-width: 1200px; 
  margin-top: 0px;
}
.bgF2{
  background-color: #F2F2F2;
}
.big-block-padding{
  padding:20px 0 80px;
}
.margin120{
  margin-top:120px;
}

@media screen and (max-width:768px) {
  .margin120{
    margin-top:1rem;
  }
  h5.i_title{
    font-size: .4rem;
    margin: .4rem 0;
    text-align: center;
  }
  .list-wrap{
    flex-wrap: wrap;
    .list-item{
      width: 100%;
      flex: auto;
      margin: 0 0 .2rem 0 !important;
      .item-content{
        top: 0;
        left: 0;
        padding: .25rem .4rem;
        
        .title {
          
          margin-bottom: .2rem;
        }
        .content {
          width: 75%;
        }
      }
      .title {
        font-size: .45rem !important;
        margin-bottom: .2rem;
      }
      .content {
        font-size: .35rem !important;
        margin: .3rem 0 !important;
        width: 85%;
      }
      .zz-btn.mini{
        padding: .05rem .3rem;
        font-size: .25rem;
      }
    }
    &.pr-list{
      flex-wrap: wrap;
      .pr-item{
        width: 49%;
        &:nth-child(odd){
          margin-right: 2% !important;
        }
        .title{
          margin-top: .5rem;
        }
      }
    }
  }
  .home-img{
    min-width: 0;
    width: 100%; 
    height: 220px;
    object-fit: cover;
  }
  .big-block-padding{
    padding:.2rem 0 .8rem
  }
  .tall-wrap{
    display: flex;
    margin-top: .5rem;
    flex-wrap: wrap;
    width: 100%;
    &>div{
      width: 100% !important;
      padding-left: 3.2rem;
      img{
        left: .3rem;
        width: 2.5rem;
      }
      &::after{
      display: none;
    }
    }
    
  }
}

</style>